import React from 'react';
import { Menu } from 'antd';
import { RouteChildrenProps, withRouter, Link } from 'react-router-dom';
// import { menuData } from './data';
import NewReport from '../../AnalyseManage/NewReport';
import './index.module.scss';

// import { getDefaultCategoryTree } from 'src/services/AnalyseManage';

interface menu {
	icon: string;
	childrenList?: Array<menu>;
	resourceId: string;
	name: string;
	uri: string;
}

const renderMenuLink = ( item: menu ) => {
	const notLinks = [ '/analyseManage/newReport', '/analyseManage/newChart' ];
	return (
		<>
			{ !notLinks.includes( item.uri ) ? (
				<Link to={ item.uri }>
					<span>{ item.name }</span>
				</Link>
			) : (
				<>
					<NewReport
						title={ item.name }
						name={item.uri.indexOf( 'newReport' ) > -1 ? '报表' : '仪表板'}
						pageType={ item.uri.indexOf( 'newReport' ) > -1 ? 'report' : 'dashboard' }></NewReport>
				</>
			) }
		</>
	);
};

const renderMenuItem = ( item: menu ) => {
	return (
		<Menu.Item key={ item.resourceId } style={ { fontSize: '16px' } }
							 icon={ item.icon ? <span className={ `iconfont ${ item.icon } anticon` }></span> : null }>
			{ renderMenuLink( item ) }
		</Menu.Item>
	);
};

const renderSubMenu = ( item: menu ) => {
	return (
		<Menu.SubMenu
			key={ item.resourceId } title={ item.name }
			icon={ <span className={ `iconfont ${ item.icon } anticon` }></span> }>
			{ item.childrenList &&
			item.childrenList.map( ( item ) => {
				return item.childrenList && item.childrenList.length > 0
					? renderSubMenu( item )
					: renderMenuItem( item );
			} ) }
		</Menu.SubMenu>
	);
};

const MenuComponent = ( props: RouteChildrenProps & { menu: Array<any> } ) => {

	const menuData = props.menu || [];

	return (
		<Menu mode="inline" style={ { height: '100%', borderRight: 0 } }>
			{ menuData.map( ( item ) => {
				return item.childrenList && item.childrenList.length > 0
					? renderSubMenu( item )
					: renderMenuItem( item );
			} ) }
		</Menu>
	);
};

export default withRouter( MenuComponent );
